
<script setup lang="ts">
import { onMounted, inject } from "vue"; //主要
import * as echarts from "echarts";
import { provide } from "vue";
provide("echarts", echarts);
type EChartsOption = echarts.EChartsOption;
var option: EChartsOption;
onMounted(() => {
  change();
});
let echartss: any = inject("echarts");
const change = () => {
  const myChart = echartss.init(document.getElementById("box"));
  option = {
    xAxis: {
      type: "category",
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: "line",
      },
    ],
  };
  option && myChart.setOption(option);
  // 根据页面大小自动响应图表大小
  window.addEventListener("resize", function () {
    myChart.resize();
  });
};
</script>
<template>
  <div>
    <div>
      <el-button type="primary">主要按钮</el-button>
      <div id="box" style="width: 100%; height: 400px"></div>
    </div>
  </div>
</template>
<style scoped>
</style>
